<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-stack
-->
<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" class="m-line"></div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <!-- <script src="{{ url_for('static',filename='js/k-line.js') }}"></script> -->
    <!-- <script src="{{ url_for('static',filename='js/update.js') }}"></script> -->
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <style type="text/css">
        /* 分时线 */
        
        .m-line {
            height: 80%;
            width: 80%;
            float: left;
            /* margin-top: 10px;
            margin-right: 30px;
            margin-bottom: 30px;
            margin-left: 30px; */
            padding-top: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            padding-left: 20px;
        }
    </style>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var option;

        function running() {
            var data = getData();
            var stock_name = new Array();
            var stock_series = new Array();

            for (var i = 0; i < data['list'].length; i++) {
                stock_name.push(data['list'][i][1]);
                _data = getStockTrend(data['list'][i][0]);
                var _priceArr = get_m_data(_data['trend']).priceArr;
                var _times = get_m_data(_data['trend']).times;
                var __data = new Array();
                for (var j = 0; j < _priceArr.length; j++) {
                    __data.push(ratioCalculate(_priceArr[j], _data['preclose_px']))
                }

                stock_series.push({
                    name: data['list'][i][1],
                    type: 'line',
                    // stack: 'Total',
                    data: __data,
                    symbol: 'none',
                    endLabel: {
                        show: true,
                        formatter: function(params) {
                            return params['seriesName'] + ': ' + params['data'];
                        }
                    }
                });
            }



            option = {
                title: {
                    text: 'Stacked Line'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: stock_name
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: _times
                },
                yAxis: {
                    type: 'value'
                },
                series: stock_series
            };


            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        }


        function getData() {
            var m_data = []
            $.ajax({
                url: '/yesterday_limit2',
                data: {},
                type: 'POST',
                async: false,
                dataType: 'json',
                success: function(data) {
                    m_data = data;
                },
                error: function(msg) {
                    console.log(msg);
                }
            })
            return m_data;
        };

        /*
        获取个股分时数据
        */
        function getStockTrend(code) {
            var m_data = []
            $.ajax({
                url: '/stock_trend',
                data: {
                    date: code
                },
                type: 'POST',
                async: false,
                dataType: 'json',
                success: function(data) {
                    m_data = data;
                },
                error: function(msg) {
                    console.log(msg);
                }
            })
            return m_data;
        };

        /**
         * 计算价格涨跌幅百分比
         * @param {Object} price 当前价
         * @param {Object} yclose 昨收价
         */
        function ratioCalculate(price, yclose) {
            return ((price - yclose) / yclose * 100).toFixed(3);
        }

        function get_m_data(m_data) {
            var priceArr = new Array();
            var avgPrice = new Array();
            var vol = new Array();
            var times = new Array();
            $.each(m_data, function(i, v) {
                times.push(v[0]);
                priceArr.push(v[1]);
                avgPrice.push(v[2]);
                vol.push(v[3]);
            })
            return {
                priceArr: priceArr,
                avgPrice: avgPrice,
                vol: vol,
                times: times
            }
        }

        setInterval('running()', 1000 * 3); //指定3秒刷新一次
    </script>
</body>

</html>